<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单案例</title>
    <style>
        * { 
            margin: 0; 
            padding: 0; 
        }

        form { 
            width: 600px; 
            margin: 20px auto; 
        }

        form > fieldset { 
            padding: 10px; 
        }

        form > fieldset > meter,
        form > fieldset > input { 
            width: 100%; 
            height: 40px; 
            line-height: 40px; 
            border: none; 
            border:1px solid #ccc; 
            border-radius: 4px; 
            margin: 10px 0; 
            font-size: 16px; 
            padding-left: 4px; 
            /* width = 内容 + padding + border */
            box-sizing: border-box; 
        }

        form > fieldset > meter {
            padding-left: 0; 
        }
    </style>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <label for="userName">姓名：</label>
            <input type="text" name="userName" id="userName" placeholder="请输入用户名">
            <label for="userPhone">手机号码：</label>
            <input type="tel" name="userPhone" id="userPhone" required pattern="^1\d{10}$">
            <label for="userEmail">邮箱地址：</label>
            <input type="email" name="userEmail" id="userEmail" required>
            <label for="userCollage">所属学院：</label>
            <input type="text" name="userCollage" id="userCollage" list="userCollageList" placeholder="请选择">
            <datalist id="userCollageList">
                <option value="前端移动开发学院"></option>
                <option value="Java全栈学院"></option>
                <option value="Python人工智能学院"></option>
                <option value="DevOps自动化运维学院""></option>
            </datalist>
            <label for="userScore">入学成绩：</label>
            <input type="number" name="userScore" id="userScore" max="100" min="0" value="0">
            <label for="userLevel">基础水平：</label>
            <meter id="userLevel" max = "100" min="0" low="60" high="90"></meter>
            <label for="inDate">入学日期：</label>
            <input type="date" name="inDate" id="inDate">
            <label for="outDate">毕业日期：</label>
            <input type="date" name="outDate" id="outDate">
            <input type="submit">
        </fieldset>
    </form>
    <script>
        document.getElementById("userScore").oninput = function() {
            document.getElementById("userLevel").value = this.value;
        }
    </script>
</body>
</html>